<!--
/*
 * Copyright (c) 2013 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 */
-->
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org">
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <title>PhotoHunt</title>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
  <link rel="stylesheet" href="stylesheets/photohunt.css"/>
  <link rel="stylesheet" href="stylesheets/gh-buttons.css"/>
  <!-- IE Fix for HTML5 Tags -->
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  <script src="js/jquery.filedrop.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
  <script type='text/javascript'>
  function startApp() {
    angular.bootstrap(document, ['photoHunt']);  
  }
  </script>
</head>
<body ng-controller="PhotoHuntCtrl" ng-cloak>
<div id="container">
  <div class="lens"><img src="images/lens.png" width="140" height="140"></div>
  <header>
    <div id="topHeader">
      <h1>
        <img src="images/title-photohunt.jpg" alt="PhotoHunt"
            width="160" height="45" />
      </h1>
      <div id="profileInfo" >
        <span id="signin" ng-show="immediateFailed">
          <span id="myGsignin"></span>
        </span>
        <span ng-show="userProfile">
          <a target="_blank" href="{{userProfile.googlePublicProfileUrl}}">
            <span class="name">{{userProfile.googleDisplayName}}</span>
            <img ng-src="{{userProfile.googlePublicProfilePhotoUrl|profilePicture:32}}" />
          </a>
          <button class="button danger disconnect" ng-click="disconnect()" style="">
             Disconnect
           </button>
         </span>
      </div>
    </div>
    <div id="bottomHeader">
      <h2>Hunting for photos of
        <span id="todayTheme">{{selectedTheme.displayName}}</span>!
      </h2>
      <div>
        <button id="invite" class="button icon add primary" ng-show="themes">
          Invite your friends
        </button>
      </div>
      <div class="sort button-group">
        <button class="button icon clock" id="sortRecent"
            ng-class="recentButtonClasses"
            ng-click="orderBy('recent'); ">Recent</button>
        <button class="button icon like" id="sortPopular"
            ng-class="popularButtonClasses"
            ng-click="orderBy('popular');">Popular</button>
      </div>
    </div>
  </header>
  
  <section id="notification">{{notification}}</section>

  <section id="photoList">
   <ng-switch on="highlightedPhoto">
      <span ng-switch-when="undefined"></span>
      <div ng-switch-default id="selectedPhoto" class="contentGroup">
        <h3>Highlighted photo</h3>
        <ul>
          <li>
            <photo item="highlightedPhoto" delete-photo="deletePhoto(photoId)">
          </li>
        </ul>
      </div>
    </ng-switch>
    <div class="contentGroup" ng-show="isSignedIn">
      <h3>My Photos</h3>
      <div id="uploadContainer" ng-show="canUpload()">
        <button upload-box
            upload-url="uploadUrl"
            on-complete="uploadedPhoto(photo)"
            id="upload">
        </button>
      </div>
      <ul id="myPhotos" ng-show="userPhotos.length">
        <li ng-repeat="photo in userPhotos|orderBy:ordering">
          <photo item="photo" delete-photo="deletePhoto(photoId)"></photo>
        </li>
      </ul>
    </div>
    <div id="friendsPhotos" class="contentGroup" ng-show="friendsPhotos.length">
      <h3>Photos from Friends</h3>
      <ul id="friendsPhotos">
        <li ng-repeat="photo in friendsPhotos|orderBy:ordering">
          <photo item="photo" delete-photo="deletePhoto(photoId)"></photo>
        </li>
      </ul>
    </div>
    <div id="allPhotos" class="contentGroup" ng-show="allPhotos.length">
      <h3>All Photos</h3>
      <ul id="allPhotos">
        <li ng-repeat="photo in allPhotos|orderBy:ordering">
          <photo item="photo" delete-photo="deletePhoto(photoId)"></photo>
        </li>
      </ul>
    </div>
  </section>

  <nav ng-show="themes" id="boxThemes">
    <div>
    <h3>Recent Themes</h3>
      <ul id="recentThemes">
        <li ng-repeat="(key, value) in themes|limitTo:10">
          <span><a ng-click="selectTheme(key)">{{value.displayName}}</a></span><span class="date">{{value.created|date:'longDate'}}</span>
        </li>
      </ul>
    </div>
    <div ng-show="friends">
      <h3>Friends using PhotoHunt</h4>
      <ul id="friendList">
        <li ng-repeat="friend in friends | orderBy:'displayName'">
          <a href="{{friend.googlePublicProfileUrl}}"><img ng-src="{{friend.googlePublicProfilePhotoUrl|profilePicture:50}}"
              alt="{{friend.googleDisplayName}}" width="50" height="50"/>{{friend.googleDisplayName}}</a></li>
     </ul>
    </div>
  </nav>

  <footer>
    Powered by <a target="_blank" href="http://angularjs.org/">
      <img src="images/AngularJS-small.png" style="vertical-align: middle" />
    </a>
  </footer>
</div>
  <script type="text/javascript">
  window.___gcfg = {
    parsetags: 'explicit'
  };
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/auth:plusone.js?onload=startApp';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
  $(function() {
    $("#sort").buttonset();
  });
  </script>
</body>
</html>
